<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="http://odfa1lvoy.bkt.clouddn.com/jquery.min.js" type="text/javascript"></script>
<script src="http://odfa1lvoy.bkt.clouddn.com/bootstrap.min.js"  type="text/javascript"></script>
<script src="http://odfa1lvoy.bkt.clouddn.com/Validform_v5.3.2_min.js"  type="text/javascript"></script><!--注册-->
<link href="http://odfa1lvoy.bkt.clouddn.com/bootstrap.min.css"  type="text/css" rel="stylesheet">
<link href="http://odfa1lvoy.bkt.clouddn.com/index.css" type="text/css" rel="stylesheet">
<title>登录页面</title>
<style>
body{
	background:#ecedf1;
	}
.btn_color{
	background:#1c8f8c; 
	border:1px solid #1c8f8c;
	
	}
.btn_color:hover{
	background:#14716f;
	border:1px solid #14716f;
	}
	.border{
	border:none;
	}
.btn_color:active{
	background:#1c8f8c; 
	border:1px solid #1c8f8c;
	}
	.Validform_checktip {
	margin-left:8px;
	line-height:10px;
	height:10px;
	overflow: hidden;
	color: #000;
	font-size: 14px;
	
}

.Validform_wrong {
	color: red;
	padding-left:2px;
	white-space: nowrap;
}


</style>
</head>

<body>
    <div class="container" >
    
       <div class="row" >
       
               <div class="col-xs-12 text-center" style="margin-top:8%; ">
               
               <img src="http://odfa1lvoy.bkt.clouddn.com/A.jpg" alt="..." class="img-circle" width="100" height="100">
               
               </div>
               
               <div class="col-xs-12" style="margin-top:5%; ">
                   <form class="form-horizontal" action="" method="post" onSubmit="return myCheck()"  name="form6">
                       <div class="form-group" style="margin-bottom:0px;">
                        
                        <div class="col-sm-10">
                          
                          <input type="text" class="form-control border" id="" placeholder="用户名" datatype="n|/^[a-zA-Z]+$/ |/^[A-Za-z0-9]+$/" errormsg="请输入数字或字母组合！" >
                            <span class="Validform_checktip"></span>
                        </div>
                      </div>
                      
                      
                      <div class="form-group">
                        
                        <div class="col-sm-10">
                          <input type="password" class="form-control border" id="" placeholder="密码" datatype="*6-12" errormsg="密码范围在6~12位之间！">
                           <span class="Validform_checktip"></span>
                        </div>
                      </div>
                      
                      <div class="form-group">
                        
                            <div class="col-sm-10 center-block" style="margin-bottom:3%; width:95%">
                              <button type="button" class="btn btn-primary btn-lg btn-block btn_color">登录</button>
                            </div>
                     </div>
                      
                      
                      <div class="form-group">
                        
                            <div class="col-sm-10" style="width:95%" >
                                
                                    <div class="col-xs-6  text-left">
                                    
                                    <label class="checkbox-inline">
                                      <input type="checkbox" id="inlineCheckbox1" value="option1" border="none"> 记住密码
                                    </label>
                                    </div>
                                    
                                     <div class="col-xs-6  text-right">
                                    
                                    <label class="checkbox-inline">
                                     <a href="" style="text-decoration:underline"><ul>忘记密码?</ul></a>
                                    </label>
                                    </div>
                                   
                            </div>
                       </div>
                    
                      
                   </form>
               
               </div>
           
       </div><!--row  end-->
    
    </div><!--container  end-->
</body>
</html>
 <script type="text/javascript">
$(function(){
   $(".form-horizontal").Validform({
		tiptype:function(msg,o,cssctl){
		    if(!o.obj.is("form")){
				var objtip=o.obj.siblings(".Validform_checktip");
				cssctl(objtip,o.type);
				objtip.text(msg);
			}
		}
	});
})
function myCheck()
      {
         for(var i=0;i<document.form6.elements.length-1;i++)
         {
          if(document.form6.elements[i].value=="")
          {
           alert("当前表单不能有空项");
           document.form6.elements[i].focus();
           return false;
          }
         }
         return true;
      }
</script>